<template>
  <div style="width: 100%; height: 100%">
    <div :id="id" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart1",
    },
    update: {
      type: Number,
      default: 0,
    },
    title: String,
  },
  data() {
    return {
      myChart:null
    };
  },
  computed:{
    resize(){
      return this.$store.state.chartSize;
    }
  },
  watch: {
    update() {
      this.drawBar();
    },
    resize(val){
      this.$nextTick(()=>{
        this.myChart.resize()
      })
    }
  },
  methods: {
    drawBar(val) {
      if (this.myChart) {
        this.myChart.clear();
      }

      this.myChart = echarts.init(document.getElementById(this.id));
      let option = {
        color:'rgba(2, 205, 230, 100)',
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        title: {
          text: this.title,
          x: 'center',
          y:'bottom',
          textStyle: {
              color: "black",
              fontSize: 18,
              fontFamily: 'SourceHanSansSC-regular'
          }
          
        },
        grid:{
            left: '20%'
        },
        xAxis: {
            type:'value',
            name:'年',
            nameTextStyle:{
                color:"black"
            },
             axisLabel:{
                show: true,
                textStyle:{
                    color: "black"
                }
            },
            splitLine:{
                show: false
            },
             axisLine:{
                show: true
                
            }

        },
        yAxis: {
            name:'运行年限(Top)',
            nameTextStyle:{
                color:"black"
            },
            type:'category',
            data:val.kqNameList,
            axisLabel:{
                show:true,
                textStyle:{
                    color:"black"
                }
            },
             splitLine:{
                show: false
            },
            axisLine:{
                show: true
                
            }
           
        },
        series: [
          {
            name: "运行年限(Top)",
            type: "bar",
            barWidth:'30%',
            label: {
                show: true,
                fontSize: "14",
                position:'right',
                textStyle:{
                    color: "black"
                }
            },
            labelLine: {
              show: true,
            },
            
            data: val.yearList,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>